import { Button, Table, Modal, notification } from 'antd'
import {
  DeleteOutlined,
  EditOutlined,
  VerticalAlignTopOutlined,
  ExclamationCircleFilled
} from '@ant-design/icons';
import axios from 'axios'
import React, { useEffect, useState } from 'react'

const { confirm } = Modal;

function NewsDraft(props) {
  const { username } = JSON.parse(localStorage.getItem("token"))
  const [dataSource, setdataSource] = useState([])
  useEffect(() => {
    axios.get(`/news?author=${username}&auditState=0&_expand=category`).then((res) => {
      const list = res.data;
      setdataSource(list)
    })
  }, [username])
  const columns = [
    {
      title: 'ID',
      dataIndex: 'id',
      render: (id) => {
        return <b>{id}</b>
      },
    },
    {
      title: '新闻标题',
      dataIndex: 'title',
      render: (title, item) => {
        return <a href={`#/news-manage/preview/${item.id}`} > { title }</a >
      }
    },
    {
      title: '作者',
      dataIndex: 'author'
    },
    {
      title: '分类',
      dataIndex: 'category',
      render: (category) => {
        return category.title
      }
    },
    {
      title: "操作",
      render: (item) => {
        return <div>
          <Button
            danger
            shape='circle'
            icon={<DeleteOutlined />}
            style={{ margin: "0px 10px" }}
            onClick={() => {
              confirmMethod(item)
            }}
          ></Button>
          <Button
            shape='circle'
            icon={<EditOutlined />}
            style={{ margin: "0px 10px" }}
            onClick={()=>{
              props.history.push(`/news-manage/update/${item.id}`)
            }}
          ></Button>
          <Button
            type='primary'
            shape='circle'
            icon={<VerticalAlignTopOutlined />}
            style={{ margin: "0px 10px" }}
            onClick={()=>{
              handleCheck(item.id)
            }}
          ></Button>
        </div>
      }
    }
  ];

  // 给删除按钮绑定点击事件
  const confirmMethod = (item) => {
    confirm({
      title: '你确定要删除?',
      icon: <ExclamationCircleFilled />,
      onOk() {
        deleteMethod(item)
      }
    });
  }
  const deleteMethod = (item) => {
    // 当前页面同步操作 + 后端同步
    setdataSource(dataSource.filter(data => data.id !== item.id))
    axios.delete(`/news/${item.id}`)
  }

  const handleCheck = (id)=>{
    axios.patch(`/news/${id}`,{
      auditState:1
    }).then((res)=>{
      props.history.push("/audit-manage/list");
      notification.info({
        message:"通知",
        description:`您可以跳转到审核列表中查看您的新闻`,
        placement:"bottomRight"
      })
    })
  }

  return (
    <div>
      <Table
        dataSource={dataSource}
        columns={columns}
        pagination={{
          pageSize: 5
        }}
        rowKey={item => item.id}
      />
    </div>
  )
}

export default NewsDraft